<template>
	<pro-table
		ref="protable"
		:loadDataUrl="loadDataUrl"
		rowKey="menuId"
		:showPagination="false"
		:columns="columns"
		:isRowSelection="false"
		:isAdd="$_has('sys:menu:insert')"
		@setTableData="setTableData"
		@addRecord="addRecord"
		@showDeleteConfirm="showDeleteConfirm"
	>
		<a-tag :color="text | filterB" slot="type" slot-scope="{ text, record }">{{ text | filterA }}</a-tag>
		<i class="menu-icon iconfont" slot="icon" slot-scope="{ text, record }" :class="'icon-' + text"></i>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-has="'sys:menu:update'" title="编辑" class="edit" @click="editRecord(record)"
				>编辑</a
			>
			<a
				href="javascript:;"
				v-has="'sys:menu:insert'"
				title="新增"
				class="add"
				@click="handleAddSub(record.menuId)"
				>新增</a
			>
			<a
				href="javascript:;"
				v-has="'sys:menu:delete'"
				title="删除"
				class="del"
				@click="showDeleteConfirm(1, record.menuId, record.name)"
				>删除</a
			>
		</span>
		<!-- 权限 -->
		<!-- 添加，编辑  -->
		<menu-list-modal
			:api="api"
			modalTitle="菜单"
			ref="addOrEditModal"
			@ok="handlerRefresh"
			:MenuTree="menuTree"
		></menu-list-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins'
import { sysManageapi } from '@/api/index.js'
import menuListModal from './module/menuListModal'
const columns = [
	{
		title: '名称',
		dataIndex: 'name',
		key: 'name',
		ellipsis: true,
	},
	{
		title: '图标',
		dataIndex: 'icon',
		key: 'icon',
		align: 'center',
		scopedSlots: {
			customRender: 'icon',
		},
	},
	{
		title: '类型',
		dataIndex: 'type',
		key: 'type',
		scopedSlots: {
			customRender: 'type',
		},
	},
	{
		title: '权限标识',
		dataIndex: 'perms',
		key: 'perms',
		ellipsis: true,
	},
	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		scopedSlots: {
			customRender: 'operation',
		},
	},
]
export default {
	name: 'menulist',
	mixins: [rowSelection, recordOperation],
	components: {
		menuListModal,
	},
	data() {
		return {
			columns: columns,
			filter: {},
			loadDataUrl: sysManageapi.menuUrl.getList,
			api: sysManageapi.menuUrl,
			menuTree: [],
		}
	},
	created() {},
	methods: {
		handleAddSub(menuId) {
			this.$refs.addOrEditModal.add({
				parentId: menuId,
			})
		},
		editMenuList(record) {
			this.$refs.menuListModal.edit(record)
		},
		setTableData(menu) {
			this.menuTree = [...menu]
		},
	},
	filters: {
		filterA: function (value) {
			if (value == 0) {
				return '目录'
			}
			if (value == 1) {
				return '菜单'
			}
			if (value == 2) {
				return '按钮'
			}
		},
		filterB: function (value) {
			if (value == 0) {
				return '#337AB7'
			} else if (value == 1) {
				return '#47BC47'
			}
			if (value == 2) {
				return '#F0AD4E'
			}
		},
	},
}
</script>

<style scoped="scoped" lang="less"></style>
